import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import './login.scss';
import Animate from 'rc-animate';
import PropTypes from 'prop-types'


class Login extends Component {
    state={
        mobileCode: '',
        userAccount: '',
        hasAlert: false,
        alertText: '',
        password: '',
        codeNumber: '',
        captchaCodeImg: '',
        showPwd: true,
        loginWay: false
    }
    handleInput=(type,event)=>{
        console.log(type,event)
    }
    getCaptchaCode=async()=>{

    }
    mobileLogin=async()=>{

    }
    render() {
        return (
            <div className="login-container">
                {/*<form className="login-form">
                    <section className="input-container phone-number">
                        <input type="text"  placeholder="账户密码随便输入"  name="phone"  maxLength="11" value={this.state.mobileCode}  />
                    </section>
                </form>*/}

                <form className="login-form">
                    <section className="input-container">
                        <input type="text" placeholder="账号"
                               value={this.state.userAccount}
                               onChange={this.handleInput.bind(this,'userAccount')} />
                    </section>
                    <section className='input-container'>
                        <input type="text" placeholder="密码"
                               value={this.state.password}
                               onChange={this.handleInput.bind(this,'password')} />
                        <div className="button-switch">
                            <div className="circle-button">
                                <span>abc</span>
                                <span>...</span>
                            </div>
                        </div>
                    </section>
                    <section className='input-container captcha-code-container'>
                        <input placeholder="验证码"  maxLength='4'
                               value={this.state.codeNumber}
                               onChange={this.handleInput.bind(this,'codeNumber')}  />
                        <div className='img-change-img'>
                            <img src={this.state.captchaCodeImg} alt="img is wrong" />
                            <div className='change-img' onClick={this.getCaptchaCode.bind(this)}>
                                <p>看不清</p>
                                <p>换一张</p>
                            </div>
                        </div>
                    </section>
                </form>
                <p className='login-tips'>
                    温馨提示: 未注册过的账号, 登录时自动注册
                </p>
                <p className='login-tips'>
                    注册过的用户可凭证账号密码登录
                </p>
                <div className="login-button" onClick={this.mobileLogin}></div>

            </div>
        )
    }
}


export default Login;
